<template>
  <div class="container">
    <!-- 卡片主体 -->
    <el-card class="box-card">
      <!-- ------------------------------------------顶部功能按钮 -->
      <el-row class="qc-top-tools" type="flex" justify="end">
        <el-button type="success" @click="addQuestion">新增试题</el-button>
      </el-row>
      <!-- ------------------------------------------筛选表单 -->
      <el-form
        ref="choiceForm"
        class="qc-form"
        :inline="true"
        :model="choiceForm"
        label-width="80px"
        size="small"
      >
        <!-- 学科 -->
        <el-form-item label="学科">
          <el-select v-model="choiceForm.subjectID" placeholder="请选择">
            <el-option
              v-for="({ value, label }) in asyncData.subjects"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 二级目录 -->
        <el-form-item label="二级目录">
          <el-select v-model="choiceForm.catalogID" placeholder="请选择">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- 标签 -->
        <el-form-item label="标签">
          <el-select v-model="choiceForm.tags" placeholder="请选择">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- 关键字 -->
        <el-form-item label="关键字">
          <el-input v-model="choiceForm.keyword" placeholder="输入题干关键字"></el-input>
        </el-form-item>
        <!-- 试题类型 -->
        <el-form-item label="试题类型">
          <el-select v-model="choiceForm.questionType" placeholder="请选择">
            <el-option
              v-for="({ value, label }) in HMMM_CONST.questionType"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 试题难度 -->
        <el-form-item label="难度">
          <el-select v-model="choiceForm.difficulty" placeholder="请选择">
            <el-option
              v-for="({ value, label }) in HMMM_CONST.difficulty"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向">
          <el-select v-model="choiceForm.direction" placeholder="请选择">
            <el-option
              v-for="(item, idx) in HMMM_CONST.direction"
              :key="idx"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 录入人 -->
        <el-form-item label="录入人">
          <el-select v-model="choiceForm.creatorID" placeholder="请选择">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注">
          <el-input v-model="choiceForm.remarks"></el-input>
        </el-form-item>
        <!-- 企业简称 -->
        <el-form-item label="企业简称">
          <el-input v-model="choiceForm.shortName"></el-input>
        </el-form-item>
        <!-- 企业所在地省份 及 企业所在城市 -->
        <el-form-item label="城市">
          <el-row type="flex" :gutter="5">
            <!-- 省份 -->
            <el-col>
              <el-select class="qc-form-province" v-model="choiceForm.province" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
            <!-- 城市 -->
            <el-col>
              <el-select class="qc-form-city" v-model="choiceForm.city" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 表单功能按钮 -->
        <el-form-item class="qc-form-tools">
          <el-button @click="clearChoice">清除</el-button>
          <el-button type="primary" @click="handleChoice">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- -------------------------------------------审核选项卡 -->
      <el-tabs v-model="chkState" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="-1"></el-tab-pane>
        <el-tab-pane
          v-for="({ value, label }, idx) in chkType"
          :key="value"
          :label="label"
          :name="idx.toString()"
        ></el-tab-pane>
      </el-tabs>
      <!-- ---------------------------------------------警告消息 -->
      <el-alert :title="`数据一共${questionTotal}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- ---------------------------------------------题库表格 -->
      <el-table class="qc-table" :data="questionList" style="width: 100%" max-height="450">
        <el-table-column prop="number" label="试题编号" width="220"></el-table-column>
        <el-table-column prop="subject" label="学科" width="120"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
        <el-table-column :formatter="questionTypeFormatter" prop="questionType" label="题型" width="120"></el-table-column>
        <el-table-column :formatter="questionFormatter" prop="question" label="题干" width="300"></el-table-column>
        <el-table-column :formatter="addDateFormatter" prop="addDate" label="录入时间" width="150"></el-table-column>
        <el-table-column :formatter="difficultyFormatter" prop="difficulty" label="难度" width="100"></el-table-column>
        <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
        <el-table-column :formatter="chkStateFormatter" prop="chkState" label="审核状态" width="100"></el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="100"></el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
        <el-table-column :formatter="publishStateFormatter" prop="publishState" label="发布状态" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="{ row }">
            <el-button @click="handlePreview(row)" type="text" size="small">预览</el-button>
            <el-button type="text" size="small" :disabled="row.chkState !== 0">审核</el-button>
            <el-button type="text" size="small" :disabled="row.publishState === 1">修改</el-button>
            <el-button type="text" size="small">{{ row.publishState ? '下架' : '上架' }}</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- -----------------------------------------------底部分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size.sync="questionPageOption.pagesize"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          :current-page.sync="questionPageOption.page"
          :total="questionTotal">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { choice as questionsChoiceAPI } from '@/api/hmmm/questions.js' // 试题接口
import { simple as subjectsSimpleListAPI, detail as subjectDetailAPI } from '@/api/hmmm/subjects.js' // 学科接口
import * as HMMM_CONST from '@/api/hmmm/constants.js' // 预设常量
import { html2Text, parseTime } from '@/utils'
export default {
  name: 'questionsChoice',
  data () {
    return {
      // 筛选表单内容 (说明：目前支持学科和关键字条件筛选)
      choiceForm: {
        subjectID: null, // 学科
        // catalogID: null, // 二级目录
        // tags: '', // 标签
        keyword: '' // 关键字
        // questionType: '', // 试题类型
        // difficulty: '', // 试题难度
        // direction: '', // 方向
        // creatorID: null, // 录入人
        // remarks: '', // 题目备注
        // shortName: '', // 企业简称
        // province: '', // 企业所在地省份
        // city: '', // 企业所在城市
        // chkState: '-1' // 审核状态 0 待审核 1 通过 2 拒绝，缺省为全部
      },
      // 控制选项卡 审核状态 0 待审核 1 通过 2 拒绝，缺省为全部
      chkState: '-1',
      // 响应常量
      HMMM_CONST,
      // 表单筛选下拉数据
      asyncData: {
        subjects: null, // 学科
        twoLevelDirectory: null // 二级目录
      },
      // 试题总数量
      questionTotal: 0,
      // 试题分页
      questionPageOption: { page: 1, pagesize: 10 },
      // 试题列表
      questionList: [],
      // 审核状态对应列表，破预设常量!!
      chkType: [
        { value: 0, label: '待审核' },
        { value: 1, label: '已审核' },
        { value: 2, label: '已拒绝' }
      ],
      // 发布状态对应列表，+1!!
      publishType: [
        { value: -1, label: '待发布' },
        { value: 0, label: '已下架' },
        { value: 1, label: '已发布' }
      ]
    }
  },
  computed: {
    // 计算精选试题请求参数
    choiceFormReq () {
      const option = { ...this.choiceForm, chkState: this.chkState, ...this.questionPageOption }
      // 审核状态
      option.chkState = option.chkState === '-1' ? null : option.chkState
      return option
    }
  },
  watch: {
    // 侦听学科选项改变，请求学科详情，无实际二级数据，略过
    'choiceForm.subjectID' () { this.getSubjectsList() },
    // 侦听审核状态筛选，请求试题
    chkState () { this.getQuestionsChoice(this.choiceFormReq) },
    // 侦听分页变化，请求数据
    questionPageOption: {
      handler () {
        this.getQuestionsChoice(this.choiceFormReq)
      },
      deep: true
    }
  },
  methods: {
    // 获取简单学科列表
    async getSubjectsSimpleList () {
      const { data } = await subjectsSimpleListAPI()
      this.asyncData.subjects = [...data]
    },
    // 根据学科ID获取学科详情
    async getSubjectsList () {
      const { data } = await subjectDetailAPI({ id: this.choiceForm.subjectID })
      console.log(data)
    },
    // 获取精选题库列表
    async getQuestionsChoice (option = null) {
      const { data } = await questionsChoiceAPI(option)
      // this.questionList = [...data.items, ...data.items, ...data.items] // 让数据多一点
      this.questionTotal = data.counts
      this.questionList = [...data.items]
    },
    // // 映射审核选项卡标签值
    // mapChkState (value) {
    //   let label = ''
    //   switch (value) {
    //     case 1:
    //       label = '待审核'
    //       break
    //     case 2:
    //       label = '已审核'
    //       break
    //     case 3:
    //       label = '已拒绝'
    //       break
    //     default:
    //       break
    //   }
    //   return label
    // },
    // 按条件查询试题
    handleChoice () {
      this.getQuestionsChoice(this.choiceFormReq)
    },
    // 清除条件
    clearChoice () {
      // this.$refs.choiceForm.resetFields()
      this.choiceForm = this.$options.data().choiceForm
      this.getQuestionsChoice(this.choiceFormReq) // 重新获取初始条件下的试题
    },
    // 顶部功能按钮：新增试题
    addQuestion () {
      console.log('添加试题功能按钮')
    },
    // 选项卡点击事件，实际没有用到
    handleTabClick (tab, event) {
      // console.log(tab, event)
      console.log(tab.name)
    },
    // 表格项功能按钮: 预览
    handlePreview () {
      console.log('预览按钮')
      console.log(arguments)
    },
    // 表格项功能按钮: 审核
    handleChk () {
      console.log('审核按钮')
      console.log(arguments)
    },
    // 表格项功能按钮: 修改
    handleEdit () {
      console.log('修改按钮')
      console.log(arguments)
    },
    // 表格项功能按钮: 上架
    handlePublish () {
      console.log('上架按钮')
      console.log(arguments)
    },
    // 表格项功能按钮: 删除
    handleDelete () {
      console.log('删除按钮')
      console.log(arguments)
    },
    // 表格列格式化：试题类型
    questionTypeFormatter ({ questionType }) {
      const typeMap = this.HMMM_CONST.questionType
      return typeMap.find(({ value }) => String(value) === questionType)?.label ?? '空'
    },
    // 表格列格式化：难度
    difficultyFormatter ({ difficulty }) {
      const difficultyMap = this.HMMM_CONST.difficulty
      return difficultyMap.find(({ value }) => String(value) === difficulty)?.label ?? '空'
    },
    // 表格列格式化：审核状态
    chkStateFormatter ({ chkState }) {
      const chkTypeMap = this.chkType
      return chkTypeMap.find(({ value }) => value === chkState)?.label ?? '空'
    },
    // 表格列格式化：发布状态
    publishStateFormatter ({ publishState, chkState }) {
      // --------------------------v3
      if ([0, 2].includes(chkState)) { publishState = -1 }
      const publishTypeMap = this.publishType
      return publishTypeMap.find(({ value }) => value === publishState)?.label ?? '空'
      // -----------------v2
      // if ([0, 2].includes(chkState)) {
      //   return '待发布'
      // } else if ([1].includes(chkState)) {
      //   if (publishState === 1) {
      //     return '已发布'
      //   } else if (publishState === 0) {
      //     return '已下架'
      //   }
      // }
      // ---------------------v1
      // const publishTypeMap = this.HMMM_CONST.publishType
      // return publishTypeMap.find(({ value }) => value === publishState)?.label ?? '空'
    },
    // 表格列格式化：题干
    questionFormatter ({ question }) {
      return html2Text(question)
    },
    // 表格列格式化：录入时间
    addDateFormatter ({ addDate }) {
      return parseTime(addDate)
    }
  },
  created () {
    this.getQuestionsChoice() // 请求精选试题
    this.getSubjectsSimpleList() // 请求学科列表
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  .box-card {
    width: 100%;
    // height: 750px;
    .qc-top-tools {
      // 上方功能按钮
      margin-bottom: 20px;
    }
    .qc-form {
      // 筛选表单
      position: relative;
      &::v-deep .el-form-item__content {
        width: 180px;
        .el-select {
          width: 100%;
        }
      }
      .qc-form-tools {
        position: absolute;
        right: -50px;
      }
    }
    .qc-table {
      margin-bottom: 20px;
    }
  }
}
</style>
